---
title: 社区教学内容
description: 探索社区创建的教程、指南、文章和视频，助力你学习和使用 Astro 构建项目！
i18nReady: true
---

import Badge from '~/components/Badge.astro';

社区中有丰富的资源可以帮助你学习和使用 Astro 构建项目！以下是由 Astro 社区创建和维护的教学内容。

请注意，所有链接都指向外部网站，且可能基于 Astro 的早期版本。在使用任何社区内容时，建议你检查其发布日期，并根据项目需求进行相应调整。

想了解更多 Astro 教学内容，请访问 [Astro 博客](https://astro.build/blog/) 或订阅 [官方 Astro newletter](https://astro.build/newsletter/signup)，我们会在每个月回顾最佳社区内容。

## 课程和教程

课程和教程是教授新概念的有效途径，它们通常包含练习或示例项目供你实践。这是一个很好的学习方式，可以为你的 Astro 项目提供必要的知识和工具。

查看以下课程和教程，了解更多关于 Astro 的信息。

### 入门教程
  - [Astro 网络框架速成课程](https://www.youtube.com/watch?v=e-hTm5VmofI) 由 freeCodeCamp 提供
  - [20 分钟 Astro 速成课程](https://www.youtube.com/watch?v=zrPVTf761OI) 由 Chris Pennington 提供（完整付费课程：[学习 Astro](https://learnastro.dev/)）
  - [Astro 3.0 速成课程](https://www.youtube.com/watch?v=qBOz6TpYAOg) 由 James Q Quick 提供（完整付费课程：[使用 Astro 构建现代网站](https://astrocourse.dev/)）
  - [60 分钟 Astro 速成课程](https://www.youtube.com/watch?v=NniT0vKyn-E) 由 @developedbyed 提供
  - [理解 Astro (电子书)](https://www.ohansemmanuel.com/books/understanding-astro) 由 Ohans Emmanuel 提供
  - [代码之谷 - Astro](https://thevalleyofcode.com/astro) 由 Flavio Copes 提供

  ### 视频教程
  - [Astro 快速入门课程：构建一个服务端渲染博客](https://www.youtube.com/watch?v=XoIHKO6AkoM)
  - [我如何使用 Astro 3.x 创建一个电影应用](https://www.youtube.com/watch?v=Gvr4WhgfP0w)
  - [你可能实际上并不理解内容集合…](https://www.youtube.com/watch?v=Fcw4c3wzm7I)
  - [使用 Astro 和 Apprwrite 构建自定义博客平台](https://www.youtube.com/watch?v=OERqwLy_reA)
  - [Astro JS 作品集速成课程](https://www.youtube.com/watch?v=TwWvNK0yHjI)
  - [使用 Astro 构建全栈博客](https://egghead.io/courses/build-a-full-stack-blog-with-astro-7ffcf9ec)

## 方案和指南

查看由我们社区成员提交的向你的 Astro 项目添加功能的指导示例！

[Astro 方案](/zh-cn/recipes/) 是一系列简洁明了的操作指南，它们通过分步骤的说明，帮助读者完成特定任务。如果你想为你的 Astro 项目添加新功能或行为，方案是一个非常实用的参考资源！

其他指南可能会解释与内容领域相关的概念，例如使用图片或处理 MDX。

:::tip[添加你自己的内容！]
你是否已经为 Astro 编写了一些方案？如果是的话，欢迎[编辑此页面](https://github.com/withastro/docs/edit/main/src/content/docs/en/community-resources/content.mdx)并在相应的部分添加你的链接！
:::

### CSS
- [在 Astro 中使用 UnoCSS](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro/)
- [为 Astro 中的 Tailwind CSS 添加暗黑模式](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/)
### 认证
- [使用 Lucia 添加 Github OAuth](https://lucia-auth.com/tutorials/github-oauth/astro)
- [使用 Lucia 添加用户名和密码认证](https://lucia-auth.com/tutorials/username-and-password/astro)
### 摘要
- [在导入图片时使用动态文件名](https://vaihe.com/blog/astro/astro-dynamic-image-prop/)
- [使用 Storyblok 的故事为 Astro 添加 RSS 摘要](https://straffesites.com/en/blog/rss-feed-astro-storyblok)
- [如何将任何数据发送到你的 RSS 摘要？一个使用 Astro + RSS 的指南](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/)
### 图片
- [为你的 Astro RSS 摘要添加博客文章图片](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/)
- [为 Astro 博客生成开放图形图片](https://techsquidtv.com/blog/generating-open-graph-images-for-astro/)
### 编辑器工具
- [让 VSCode、ESLint 和 Prettier 与 Astro 协同工作](https://patheticgeek.dev/blog/astro-prettier-eslint-vscode)
- [将 Prettier 与 Astro 和 Tailwind CSS 集成](https://straffesites.com/en/blog/integrate-prettier-astro-tailwindcss)
### Markdown
- [从 Astro 的 Markdown 标题构建目录](https://kld.dev/building-table-of-contents/)
- [创建一个 Remark 插件以从你的 Markdown 文件中移除短行](https://eatmon.co/blog/remove-runts-markdown/)
- [在 Astro 中有效设置草稿页面，使用配置驱动的内容创作](https://akashrajpurohit.com/blog/set-up-draft-pages-effectively-in-astro-with-configdriven-content-authoring/)
### 性能
- [增强你的 Astro 构建：在构建后修改 HTML 文件](https://straffesites.com/en/blog/optimize-astro-html-post-build)
- [使用 Astro 设置微前端](https://medium.com/@sergio.a.soria/setting-up-micro-frontends-with-astro-and-ecma-script-modules-137340d2c520)
- [在 Astro 中实现增量静态再生（ISR）的方法](https://logsnag.com/blog/implementing-isr-in-astro)
### 实用工具
- [在 Astro 中使用 tRPC](https://www.thomasledoux.be/blog/using-trpc-astro-islands-react)
- [将 Sentry 与 Astro 集成](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/)
- [为你的 Astro 和 Storyblok 项目生成本地化站点地图](https://straffesites.com/en/blog/localized-sitemap-astro-storyblok)
- [使用 Pagefind 为你的网站添加搜索功能](https://blog.otterlord.dev/posts/astro-search/)
- [使用 Fuse.js 为你的网站添加搜索功能](https://www.youtube.com/watch?v=XnV_2MWqAhQ)
- [使用 Giscus 为你的 Astro 博客添加评论区](https://elazizi.com/posts/add-comments-section-to-your-astro-blog/)
### 国际化和本地化
- [使用 Crowdin 为你的 Astro 网站实现多语言支持：Astro 本地化指南](https://crowdin.com/blog/2023/06/21/astro-localization-and-i18n)
- [翻译 Astro 路由以适应内容集合和子页面](https://www.webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/)
### Astro DB
- [使用 Astro DB 创建留言簿](https://ryantrimble.com/blog/creating-a-guestbook-with-astro-db/)
- [如何使用 Astro DB 构建浏览量计数器](https://www.vorillaz.com/astro-views)
